<template>
  <el-dialog v-model="visible" title="装箱单打印" width="450" show-footer show-zoom resize @close="close">
    <template #default>
      <el-form :model="form" label-width="80px">
        <el-form-item label="批次号">
          <el-input v-model="form.batch_code" placeholder="批次号" />
        </el-form-item>
        <el-form-item label="件数">
          <el-input v-model="form.number" placeholder="件数" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="form.num" placeholder="数量" />
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="form.remark" placeholder="备注信息" />
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <div class="flex justify-center py-2">
        <el-button type="primary" @click="print">打印</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { getLodop } from '@/utils/LodopFuncs.js';
import { getCurrentDayNumber } from '@/utils/dateOrTime.js'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  options: {
    type: Object,
    default: {},
  },
})

const data = reactive({
  form: {}
})
const { form } = toRefs(data)

const open = (data) => {
  form.value = data
  visible.value = true
}

const print = (row) => {
  console.log(form.value.num)
  const name =  window.userInfo.user.realname || ''
  if(!form.value.number || form.value.number <= 0){
    ElMessage.error('请输入打印件数')
    return
  }
  const LODOP = getLodop();
  for (let i = 0; i < form.value.number; i++) {
    LODOP.ADD_PRINT_RECT(0, 0, 400, 300, 0, 1);
    LODOP.ADD_PRINT_TEXT(20, 20, 163, 33, 'X'+ form.value.num);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(20, 300, 163, 33, `${form.value.number}-${i + 1}`);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(50, 100, 163, 33, form.value.country);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(50, 200, 163, 33, form.value.warehouse_name);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_BARCODE(80, 50, 390, 100, "Code39", form.value.batch_code);
    LODOP.ADD_PRINT_TEXT(210, 20, 163, 33, form.value.remark);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 22);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(250, 20, 163, 33, form.value.receipt_number);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(250, 220, 163, 33, `${name}-${getCurrentDayNumber()}`);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.PRINT();
  }

  // LODOP.PREVIEW(); // 打印预览
}

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
